<template>
	<view>
		<!-- 下拉框版本 -->
		<tanchu :show="show" @change="change" :mask-click="true">
			<view class="nicheng_content">
				<view class="tankuang">
					<view class="dingdan">添加跟进</view>
					<view class="all_leixing">
						<view class="genjin">跟进类型</view>
						<view class="all_zhuangtai">
							<view class="leixing" v-for="(item,index) in leixing" :key="index"
								@click="changeLei(item.val,index,item.state)" v-if="item.state == true">
								<!-- <view class="asasasasas" v-if="index==5&& index==6 || state_s !== 2 &&  state_s !== 3" :class="{jinzhi_s:state_s == 2 ||  state_s == 3 }" >{{item.val}}-{{state_s}}</view> -->
								<view :class="{tab_ACT:item.val == leixing_val,jinzhi_s:item.state == false}">
									{{item.val}}
								</view>
							</view>
						</view>
						<view class="genjin">{{xuanze(dian_index)}}</view>
						<!-- 原来的开始 -->
						<!-- <input class="beizhu" v-if="dian_index==0||dian_index==1" placeholder="请填写金额(必填)"
							v-model="neirong" type="digit" @input="jiner_input">
						<input class="beizhu" v-else placeholder="请填写内容(必填)" v-model="neirong" type="text"> -->
						<!-- 原来的结束 -->
						<!-- 测试 -->
						<input class="beizhu" v-if="dian_index==0||dian_index==1" placeholder="请填写金额(必填)"
							v-model="neirong" type="digit" @input="jiner_input">
						<input class="beizhu" v-else-if="dian_index == 2" placeholder="请填写内容(必填)" v-model="neirong"
							type="text">
						<view class="xialakuang" v-else>
							<uni-data-select v-model="value" :localdata="paymode" @change="change_xiala" v-if="dian_index == 4" placeholder="请选择您的退回原因"></uni-data-select>
							<uni-data-select v-model="value" :localdata="quxiao" @change="change_xiala" v-if="dian_index == 5" placeholder="请选择您的取消订单原因"></uni-data-select>
							<uni-data-select v-model="value" :localdata="fangqi" @change="change_xiala" v-if="dian_index == 3" placeholder="请选择您的放弃客资原因"></uni-data-select>
							<uni-data-select v-model="value" :localdata="suodan" @change="change_xiala" v-if="dian_index == 6" placeholder="请选择您的取消锁单原因"></uni-data-select>
							<image src="../static/image/components/xiala.png" mode="" class="xiala"></image>
						</view>
						<!-- 测试 -->




						<view class="wenzi" v-if="dian_index==0||dian_index==1">
							请如实填写实际金额，如有虚报，将影响商家信誉
						</view>

						<view class="genjin">{{pingzheng(dian_index)}}</view>
						<view class="shangchuan">
							<view class="_photo shadow" style="background:#FFFFFF; " v-for="(item,index) in tupian_list"
								:key="index" :style="'background-image:url('+item+')' " @tap="chuan(index)"
								@longtap="DelImg(index)">
							</view>
							<view class="to_photo shadow" v-if="tupian_list.length!==3" @tap="chuan(-1)">
								<image src="../static/image/index/tianjia.png" mode=""></image>
								<view>上传图片</view>
							</view>
						</view>
						<view class="genjin">备注信息</view>
						<input class="beizhu" placeholder="请填写内容" v-model="beizhu">
					</view>

					<!-- <button class="anniu" style="margin-top:50rpx" @click="chuanzhi" :disabled="isDisabled" :loading="Loading">提交</button> -->
					<view class="anniu" style="margin-top:50rpx" @click='tijiao(2)'>提交</view>
				</view>

			</view>

			<!-- <image src="/static/image/me/guanbi.png" mode="" class="guanbi"></image> -->
		</tanchu>
		<requestLoading></requestLoading>
	</view>
</template>


<script>
	// import { base64ToPath, pathToBase64  } from '@/configure/image-tools.js';
	import shangchuan from '@/configure/shangchuan.js';


	export default {
		data() {
			return {
				code: '', //验证码
				chakan: {},
				// shower:true,
				leixing: [{
					val: "活动锁单",
					type: 1,
					state: true
				}, {
					val: "订单成交",
					type: 2,
					state: true
				}, {
					val: "转让客资",
					type: 3,
					state: true
				}, {
					val: "放弃客资",
					type: 4,
					state: true
				}, {
					val: "客资退回",
					type: 5,
					state: true
				}, {
					val: "取消订单",
					type: 6,
					state: false
				}, {
					val: "取消锁单",
					type: 7,
					state: false
				}],
				leixing_val: "活动锁单",
				// sift:"",
				tupian_list: [],
				beizhu: '',
				neirong: '',
				// tupian:''
				dian_index: 0,
				kzid: '',
				guanbi: false,
				Notijiao: false,
				isDisabled: false,
				Loading: false,
				eeeeee: '',
				paymode: [{
					text: '客户一开始明确表示无需求 不需要',
					value: 0
				}, {
					text: '电联多次无接听，接通后无需求',
					value: 1
				}, {
					text: '进群秒退群 无联系电话',
					value: 2
				}, {
					text: '添加微信多次 未通过 ',
					value: 3
				}, {
					text: '进群不说话 连续三天激活无回应',
					value: 4
				}, {
					text: '不是给本人咨询，咨询业务不符',
					value: 5
				}, {
					text: '其他原因',
					value: 6
				}],
				quxiao: [{
					text: '已完成前期服务 后期交付产品不满意 ',
					value: 0
				}, {
					text: '与对象分手 不举办婚礼',
					value: 1
				}, {
					text: '已被同行挖单导致死单',
					value: 2
				}, {
					text: '因客户计划有变、疫情等原因只能退款',
					value: 3
				}, {
					text: '其他',
					value: 4
				}],
				fangqi: [{
					text: '客户预算太低',
					value: 0
				}, {
					text: '死单他家',
					value: 1
				}, {
					text: '多次追踪无回应',
					value: 2
				}, {
					text: '客户明确表示 不需要了 ',
					value: 3
				}, {
					text: '其他原因',
					value: 4
				}],
				suodan: [{
					text: '客户明确表示不来店里拍摄 客户锁客金已退',
					value: 0
				}, {
					text: '客户已选择其他品牌店服务，客户锁客金已退 ',
					value: 1
				}, {
					text: '其他问题 客户锁客金已退',
					value: 2
				}],
				yuanyinType: {},
				paytype: '',
				value: '',
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			remarks: {
				type: Object,
				default: {
					state: -1
				}
			},
			idd: {
				type: String,
				// default: -1
			},
			state_s: {
				type: Number,
				// default: -1
			},
			show_s: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			show(newValue) {
				if (newValue == true) {
					// console.log('11111111111')
					// console.log(this.idd)
					this.guanbi = newValue;
					this.neirong = '';
					this.tupian_list = [];
					this.beizhu = '';
					console.log('state_s')
					console.log(this.state_s)
					this.leixing[5].state = false;
					this.leixing[6].state = false;
					this.leixing[4].state = true;
					if (this.state_s == 2) {
						this.leixing[6].state = true;
					}
					if (this.state_s == 3) {
						this.leixing[5].state = true;
						this.leixing[4].state = false;
					}
					if (this.state_s == 9) {
						this.leixing[5].state = true;
					}
					// console.log(this.guanbi,"this.guanbi")
					this.togglePopup('center', 'tip');
				}
			},
			idd(newValue, old) {
				console.log('11111111111')
				console.log(newValue)
				console.log(old)
			},

			show_s(newValue) {
				if (newValue == true) {
					this.Notijiao = newValue
					console.log("不提交", newValue)
					console.log("信息", this.Notijiao)
				}
			}

		},
		onLoad() {
			// console.log("this.kzid",kzid)
			// this.kzid=option.kzid
		},
		mounted() {},
		methods: {
			change_xiala(e) {
				let that = this;
				if (this.dian_index == 4) {
					that.neirong = that.paymode[e].text
					console.log(that.neirong,"退回");
				} else if (this.dian_index == 5) {
					that.neirong = that.quxiao[e].text
					console.log(that.neirong,"取消");
				} else if (this.dian_index == 3) {
					that.neirong = that.fangqi[e].text
					console.log(that.neirong,"放弃");
				} else if (this.dian_index == 6) {
					that.neirong = that.suodan[e].text
					console.log(that.neirong,"锁单");
				}
			},
			// change_input(e) {	
			//  if(e){
			// 		// 正则表达试
			// 		e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
			// 		// 重新赋值
			// 		this.$nextTick(() => {
			// 			   this.countnum = e
			// 		});
			// 	}
			// },
			jiner_input(e) {
				//正则表达试
				console.log(e)
				e = (e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null

				//重新赋值给input
				this.$nextTick(() => {
					this.neirong = e
				})
			},
			change(e) {
				this.eeeeee = e
				console.log(this.eeeeee, "change是啊金")
				// this.chakanval(this.remarks.state);

				if (e.show == false) {
					console.log('1111111')
					this.$emit('tanchuangbi', {
						show: e.show
					})
				}


			},
			togglePopup(type, open) {
				if (open === 'tip') {

				} else {
					this.$refs[open].open()
				}
			},

			tijiao() {

				// console.log('type')
				// var that=this;
				let that = this;
				if (that.dian_index == 0 || that.dian_index == 1 || that.dian_index == 5 || that.dian_index == 6) {
					if (that.dian_index == 0 || that.dian_index == 1) {
						if (that.neirong == "") {
							uni.showToast({
								title: '请选择' + that.leixing[that.dian_index].val + '金额',
								icon: "none"
							});
							return false
						}
						//判断不能输入负数，最多只能有两位小数
						if (!/^\d+(\.\d{1,2})?$/.test(that.neirong)) {
							// console.log(that.neirong,"that.neirong")
							uni.showToast({
								title: "请输入正确的数字（不能输入负数，只能有两位小数）",
								icon: "none"
							});
							return false;
						}
					} else {
						if (that.neirong == "") {
							uni.showToast({
								title: '请选择' + that.leixing[that.dian_index].val + '原因',
								icon: "none"
							});
							return false
						}
					}
					if (that.tupian_list.length == 0) {
						// console.log(that.neirong,"that.neirong")
						uni.showToast({
							title: '请上传' + that.leixing[that.dian_index].val + '图片',
							icon: "none"
						});
						return false;
					}


				} else if (that.neirong == "") {
					uni.showToast({
						title: '请选择' + that.leixing[that.dian_index].val + '原因',
						icon: "none"
					});
					return false
				}
				var aaa = '';
				for (var i = 0; i < that.tupian_list.length; i++) {
					if (that.tupian_list.length - 1 == i) {
						console.log(that.tupian_list.length)
						console.log(i)
						aaa = aaa + that.tupian_list[i]
					} else {
						aaa = aaa + that.tupian_list[i] + ','
					}
				}
				this.$emit('tanchuangbi', {
					show: false
				})

				let vvv = {
					kzid: that.idd,
					addtype: that.dian_index,
					pics: aaa,
					msg: that.neirong,
					remark: that.beizhu
				}


				this.$emit("kezitankuang", vvv)
				// return false
				// this.$refs[type].close()

			},
			// chuanzhi(){
			// 	var that = this;
			// 	this.$emit('xinxia', {
			// 		addtype:that.dian_index,
			// 		pics:that.tupian_list[0]+","+that.tupian_list[1]+","+that.tupian_list[2],
			// 		msg:that.neirong,
			// 		remark:that.beizhu
			// 	})
			// },
			chuanzhi() {


			},
			changeLei(val, index, sta) {
				if (sta == true) {
					this.leixing_val = val
					this.dian_index = index
					console.log(this.dian_index, "this.dian_index");
					this.neirong = '';
					this.tupian_list = [];
					this.beizhu = '';
				}

			},
			chuan(index) {
				var that = this;
				shangchuan.ajax({
					success: function(res) {
						console.log(res, "res图片")
						if (index !== -1) {
							console.log('0')
							that.tupian_list[index] = res;
						} else {
							console.log('1')
							that.tupian_list.push(res);
						}
						console.log(that.tupian_list.length)
						console.log(that.tupian_list)
					}
				})

			},
			DelImg(index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.tupian_list.splice(index, 1)
						}
					}
				})
			},
			xuanze(zhi) {
				if (zhi == 0) {
					return "锁单金额"
				} else if (zhi == 1) {
					return "成交金额"
				} else if (zhi == 2) {
					return "转让原因"
				} else if (zhi == 3) {
					return "放弃原因"
				} else if (zhi == 4) {
					return "退回原因"
				} else if (zhi == 5 || zhi == 6) {
					return "取消原因"
				}
			},
			pingzheng(zhi) {
				if (zhi == 0) {
					return "锁单凭证"
				} else if (zhi == 1) {
					return "成交凭证"
				} else if (zhi == 2 || zhi == 3 || zhi == 4 || zhi == 5) {
					return "上传截图"
				} else if (zhi == 6) {
					return "取消锁单凭证"
				}
			}
		}
	}

</script>

<style lang="scss">
	.xialakuang {
		position: relative;
	}

	.xiala {
		width: 20rpx;
		height: 12rpx;
		position: absolute;
		top: 40rpx;
		right: 20rpx;
	}

	// 下拉框开始
	.paymode {
		background-color: #EEEEEE;
		border-radius: 8rpx;
		color: #333;
	}

	// 下拉框结束
	.wenzi {
		color: $qianhui_ziti;
		font-size: 16rpx;
		padding-top: 10rpx;
	}

	.nicheng_content {
		width: calc(100% - 120rpx);
		overflow: hidden;
		margin: 0 auto;
		background-color: $white_ziti;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
	}

	.dingdan {
		text-align: center;
		font-size: 30rpx;
		color: $heise_ziti;
		font-weight: bold;
	}

	.all_leixing {}

	.genjin {
		color: $heise_ziti;
		font-size: 28rpx;
		margin-bottom: 24rpx;
		margin-top: 40rpx;
	}

	.leixing {
		view {
			font-size: 24rpx;
			color: $qianhui_ziti;
			padding: 18rpx 32rpx 18rpx 32rpx;
			border: 2rpx solid var(--qianhui_eee);
			margin-bottom: 14rpx;
			border-radius: 12rpx;
		}
	}

	.beizhu {
		font-size: 28rpx;
		color: $qianhui_ziti;
		background-color: $qianhui_eee;
		padding: 25rpx 0 27rpx 30rpx;
		border-radius: 6rpx;
	}

	.shangchuan {
		display: flex;
		// justify-content: space-between;
	}

	._photo {
		width: 180rpx;
		height: 200rpx;
		border-radius: 12rpx;
		background-color: $qianhui_white;
		border: solid 8rpx $white_ziti;
		background-size: 180rpx 200rpx !important;
		background-repeat: no-repeat !important;
		margin-right: 20rpx;
	}

	.to_photo {
		width: 188rpx;
		height: 208rpx;
		border-radius: 12rpx;
		background-color: $qianhui_white;
		background-size: 180rpx 200rpx !important;
		background-repeat: no-repeat !important;

		image {
			width: 55rpx;
			height: 55rpx;
			padding-top: 44rpx;
			padding-left: 62rpx;
		}

		view {
			font-size: 20rpx;
			color: $qianhui_ziti;
			text-align: center;
			padding-top: 10rpx;
		}
	}

	.all_zhuangtai {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tab_ACT {
		color: $zhuce_color !important;
		background-color: $yifu_bc !important;
		border: solid 2rpx $zhuce_color !important;
	}

	.jinzhi_s {
		background-color: $qianhui_ziti !important;
		color: $white_ziti !important;
		border: solid 2rpx $qianhui_ziti !important;
	}

</style>

